<template>
	<div>
		<div class="container">
			<!-- 表格 -->
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="parking_lot_id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="parking_lot_name" label="停车场名称"></el-table-column>
				<el-table-column prop="parking_lot_addr" label="地址"></el-table-column>
				<el-table-column prop="parking_lot_phone" label="联系电话"></el-table-column>
				<el-table-column prop="parking_lot_total" label="车位总数"></el-table-column>
				<!-- <el-table-column prop="parking_log_income" label="收入"></el-table-column> -->
				<el-table-column label="收入">
					<template #default="scope">￥{{ scope.row.parking_log_income }}</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { parkingLotInfoFn } from '../api/index';

// 定义对象的结构
interface ParkLotItem {
	parking_lot_id: string;
	parking_lot_name: string;
	parking_lot_addr: string;
	parking_lot_phone: string;
	parking_lot_total: string | number;
	parking_log_income: string;
	parking_lot_count: string | number;
}

// 记录表单信息
const query = reactive({
	keyword: '',
	pageIndex: 1,
	pageSize: 5
});

const tableData = ref<ParkLotItem[]>([]);
const pageTotal = ref(0);

// 获取表格数据
const getData = () => {
	let token = localStorage.getItem('auto_token')
	parkingLotInfoFn({ token }).then(res => {
		// console.log('1.0', res)
		let { code, data,msg } = res;
		if (code == 200) {
			tableData.value = data;
		}
		else {
			ElMessage.error(msg);
		}
	});
};

getData();


</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #F56C6C;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
